<template>
  <div>
    <!-- 顶部面包屑导航 -->
    <breadcrumb-nav>
      <template v-slot:firstMenu>数据统计</template>
      <template v-slot:secondMenu>数据报表</template>
    </breadcrumb-nav>

    <el-row :gutter="10">
      <el-col :span="12">
        <el-card style="height: 280px; margin:5px ">
          <div id="main1" style="width: 500px;height: 270px; "></div>
        </el-card>
      </el-col>
      <el-col :span=" 12">
        <el-card style="height: 280px; margin:5px">
          <div id="main2" style="width: 500px;height: 270px; "></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-card style="height: 280px; margin:5px">
          <div id="main3" style="width: 500px;height: 270px ; "></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card style="height: 280px; margin:5px">
          <div id="main4" style="width: 500px;height: 270px; "></div>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import BreadcrumbNav from "../common/BreadcrumbNav";
import * as echarts from "echarts";

import { getReportData } from "network/report";

export default {
  name: "Report",
  components: {
    BreadcrumbNav,
  },
  data() {
    return {
      options1: {
        title: {
          text: "用户来源",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#E9EEF3",
            },
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            boundaryGap: false,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
      },
    };
  },
  mounted() {
    let myChart1 = echarts.init(document.getElementById("main1"));
    getReportData().then((res) => {
      let result = res.data;
      if (result.meta.status !== 200) {
        return this.alertMessage("获取数据失败", "error");
      }
      let options1 = { ...this.options, ...result.data };
      myChart1.setOption(options1);
    });
    let myChart2 = echarts.init(document.getElementById("main2"));
    let options2 = {
      backgroundColor: "#ffffff",
      color: ["#FF9966", "#FFFFCC", "#0099CC", "#99CC33", "#99CCCC"],
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c}$ ({d}%)",
        textStyle: {
          fontSize: 15,
        },
      },
      legend: {
        data: ["A", "B", "C", "D", "E"],
        orient: "vertical",
        right: "5%",
        top: "13%",
        top: "center",
        itemWidth: 20,
        itemHeight: 20,
        itemGap: 30,
        textStyle: {
          color: "#",
          fontSize: 16,
        },
      },
      series: [
        {
          name: "TITLE",
          type: "pie",
          clockwise: false,
          startAngle: 90,
          radius: "35%",
          center: ["44%", "50%"],
          hoverAnimation: false,
          roseType: "radius",
          data: [
            {
              value: 335,
              name: "A",
            },
            {
              value: 310,
              name: "B",
            },
            {
              value: 234,
              name: "C",
            },
            {
              value: 135,
              name: "D",
            },
            {
              value: 148,
              name: "E",
            },
          ],
          itemStyle: {
            normal: {
              borderColor: "#273454",
              borderWidth: "5",
            },
          },
          label: {
            show: true,
            position: "outside",
            formatter: "{a|{b}：{d}%}\n{hr|}",
            rich: {
              hr: {
                backgroundColor: "t",
                borderRadius: 100,
                width: 0,
                height: 10,
                padding: [3, 3, 0, -16],
                shadowColor: "#1c1b3a",
                shadowBlur: 1,
                shadowOffsetX: "0",
                shadowOffsetY: "2",
              },
              a: {
                padding: [-35, 15, -20, 5],
              },
            },
          },
          labelLine: {
            normal: {
              length: 20,
              length2: 30,
              lineStyle: {
                width: 1,
              },
            },
          },
        },
      ],
    };
    myChart2.setOption(options2);
    let myChart3 = echarts.init(document.getElementById("main3"));
    let options3 = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
        },
      },
      legend: {
        // data: ["日K", "MA5", "MA10", "MA20", "MA30"]
      },
      grid: {
        left: "10%",
        right: "10%",
        bottom: "15%",
      },

      xAxis: {
        type: "category",
        scale: true,
        boundaryGap: false,
        axisLine: {
          onZero: false,
        },
        splitLine: {
          show: false,
        },
        splitNumber: 20,
        min: "dataMin",
        max: "dataMax",
      },
      yAxis: {
        scale: true,
        splitArea: {
          show: true,
        },
      },
      series: [
        {
          name: "日K",
          type: "candlestick",
          encode: {
            tooltip: [1, 2, 3, 4],
          },
          data: [
            [2320.26, 2320.26, 2287.3, 2362.94],
            [2300, 2291.3, 2288.26, 2308.38],
            [2295.35, 2346.5, 2295.35, 2346.92],
            [2347.22, 2358.98, 2337.35, 2363.8],
            [2360.75, 2382.48, 2347.89, 2383.76],
          ],
        },
      ],
    };
    myChart3.setOption(options3);
    let myChart4 = echarts.init(document.getElementById("main4"));
    let options4 = {
      backgroundColor: "#fff",
      textStyle: {
        color: "#c0c3cd",
        fontSize: 14,
      },
      toolbox: {
        show: false,
        feature: {
          saveAsImage: {
            backgroundColor: "#031245",
          },
          restore: {},
        },
        iconStyle: {
          borderColor: "#c0c3cd",
        },
      },
      legend: {
        top: 10,
        itemWidth: 8,
        itemHeight: 8,
        icon: "circle",
        left: "center",
        padding: 0,
        textStyle: {
          color: "#c0c3cd",
          fontSize: 14,
          padding: [2, 0, 0, 0],
        },
      },
      color: [
        "#63caff",
        "#49beff",
        "#03387a",
        "#03387a",
        "#03387a",
        "#6c93ee",
        "#a9abff",
        "#f7a23f",
        "#27bae7",
        "#ff6d9d",
        "#cb79ff",
        "#f95b5a",
        "#ccaf27",
        "#38b99c",
        "#93d0ff",
        "#bd74e0",
        "#fd77da",
        "#dea700",
      ],
      grid: {
        containLabel: true,
        left: 20,
        right: 20,
        bottom: 10,
        top: 40,
      },
      xAxis: {
        nameTextStyle: {
          color: "#c0c3cd",
          padding: [0, 0, -10, 0],
          fontSize: 14,
        },
        axisLabel: {
          color: "#c0c3cd",
          fontSize: 14,
          interval: 0,
        },
        axisTick: {
          lineStyle: {
            color: "#384267",
            width: 1,
          },
          show: true,
        },
        splitLine: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: "#384267",
            width: 1,
            type: "dashed",
          },
          show: true,
        },
        data: [
          "垣曲县网格",
          "迎泽区网格",
          "山西省文明办",
          "妇幼两癌",
          "平遥数字城管",
        ],
        type: "category",
      },
      yAxis: {
        nameTextStyle: {
          color: "#c0c3cd",
          padding: [0, 0, -10, 0],
          fontSize: 14,
        },
        axisLabel: {
          color: "#c0c3cd",
          fontSize: 14,
        },
        axisTick: {
          lineStyle: {
            color: "#384267",
            width: 1,
          },
          show: true,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#384267",
            type: "dashed",
          },
        },
        axisLine: {
          lineStyle: {
            color: "#384267",
            width: 1,
            type: "dashed",
          },
          show: true,
        },
        name: "",
      },
      series: [
        {
          data: [200, 85, 112, 50, 305],
          type: "bar",
          barMaxWidth: "auto",
          barWidth: 30,
          itemStyle: {
            color: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              type: "linear",
              global: false,
              colorStops: [
                {
                  offset: 0,
                  color: "#0b9eff",
                },
                {
                  offset: 1,
                  color: "#63caff",
                },
              ],
            },
          },
          label: {
            show: true,
            position: "top",
            distance: 10,
            color: "#fff",
          },
        },
        {
          data: [1, 1, 1, 1, 1, 1, 1, 1],
          type: "pictorialBar",
          barMaxWidth: "20",
          symbol: "diamond",
          symbolOffset: [0, "50%"],
          symbolSize: [30, 15],
        },
        {
          data: [200, 85, 112, 50, 305],
          type: "pictorialBar",
          barMaxWidth: "20",
          symbolPosition: "end",
          symbol: "diamond",
          symbolOffset: [0, "-50%"],
          symbolSize: [30, 12],
          zlevel: 2,
        },
        {
          data: [500, 300, 600, 100, 700],
          type: "bar",
          barMaxWidth: "auto",
          barWidth: 30,
          barGap: "-100%",
          label: {
            show: true,
            position: "top",
            distance: 10,
            color: "#fff",
          },
          zlevel: -1,
        },
        {
          data: [1, 1, 1, 1, 1, 1, 1, 1],
          type: "pictorialBar",
          barMaxWidth: "20",
          symbol: "diamond",
          symbolOffset: [0, "50%"],
          symbolSize: [30, 15],
          zlevel: -2,
        },
        {
          data: [500, 300, 600, 100, 700],
          type: "pictorialBar",
          barMaxWidth: "20",
          symbolPosition: "end",
          symbol: "diamond",
          symbolOffset: [0, "-50%"],
          symbolSize: [30, 12],
          zlevel: -1,
        },
      ],
      tooltip: {
        trigger: "axis",
        show: false,
      },
    };
    myChart4.setOption(options4);
  },
};
</script>

<style scoped>
</style>
